<template>
	<view>
		<!-- <u-navbar style="position: fixed;" border-bottom="false"  background="rgba(0,0,0,0)" is-fixed="true" z-index="999" title=" "></u-navbar> -->

	<!-- 外部页面   -->
	<view id="outside" :style="{'height':height+'px'}">
		<navbar>
			<view slot="header">
				<view @click="back" style="width: 30px;height: 45px;line-height: 45px;margin-left: 20px;">
					<u-icon name="arrow-left" size="30" color="#ffffff"></u-icon>
				</view>
			</view>
		</navbar>
		<view class="bigBox" :style="{'width':width+'px'}">
			<image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/gouwoshuoye/12.png" :style="{'width':width+'px','height':height+'px'}" mode=""></image>
			<!-- 头像部分-->
			<view class="topBox">
			<!--	<image mode="widthFix" style="width: 243rpx;"  src="../9.5Pages/imgs/1/userIcon.png">   -->
			<image mode="widthFix" style="width: 243rpx;">
				<image style="position: fixed;z-index: 1;top: 100px;right: 20px;" mode="widthFix" class="toolIcon"  @click="openHelps" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/1/helpIcon.png">
					<view style="position: fixed;z-index: 1;top: 145px;right: 24px;font-size: 36rpx;color: #333333">说明</view>
			</view>
			<!-- 商城，背包，记录图标 -->
			<view class="sunIcon">
				<image style="position: fixed;z-index: 1;top: 10px; right: 10px;" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/1/sun.gif">
			</view>


			<!-- <view class="icon" style=""> -->
				<image style="position: fixed;z-index: 1;top: 100px;left: 20px;" mode="widthFix"  class="toolIcon" @click="openShop" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/1/shopIcon.png">
					<view style="position: fixed;z-index: 1;top: 110px;left: 62px;font-size: 36rpx;color: #333333">商城</view>
			<!-- </view> -->
			<!-- <view class="icon" style="margin-top:45rpx"> -->
				<image mode="widthFix" style="position: fixed;z-index: 1;top: 160px;left: 20px;"  class="toolIcon" @click="openBag" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/1/bagIcon.png">
					<view style="position: fixed;z-index: 1;top: 172px;left: 62px;font-size: 36rpx;color: #333333">背包</view>

					<!-- </view> -->
			<!-- <view class="icon" style="margin-top:45rpx"> -->
				<image style="position: fixed;z-index: 1;top: 220px;left: 20px;" mode="widthFix"  class="toolIcon" @click="openRecord" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/1/recordIcon.png">
					<view style="position: fixed;z-index: 1;top: 230px;left: 62px;font-size: 36rpx;color: #333333">记录</view>

					<!-- </view> -->
			<image @click="shouqu" v-for="(item,index) in 2" :style="{'left':-(index*30)+'px'}" mode="widthFix" style="width: 320rpx;position: absolute;z-index: 1;top: 46%;" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/1/flower.gif">
			<!-- <view class="middlePart"> -->

				<image mode="widthFix" style="width: 360rpx; position:absolute;z-index: 1;top:30%;left: 200px;" title="狗窝" @click="intoInside" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/gouwoshuoye/6.png">
			<!-- </view> -->
			<!-- 狗 -->
			<!-- <view :style="" class="dog"> -->
				<image v-if="src" mode="widthFix" style="width: 240rpx;position: absolute;z-index: 1;bottom:100px;" :style="{'left':left+'px'}" :src="src">

					<view style="width: 100%;position: absolute;z-index: 1;bottom:100px;color: #333333;font-size: 36rpx;text-align: center" v-if="petInfo && !src">
						宠物在外探险，投喂可召回宠物
					</view>


			<!-- </view> -->
			<!-- 底部图标 -->
			<view class="bottomBtn">
				<image mode="widthFix" class="toolIcon" @click="getFood" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/1/getFood.png">
				<!-- <image mode="widthFix"  class="toolIcon" @click="feedFood" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/1/feedIcon.png"> -->
			</view>
			<!-- 悬浮窗 -->
			<!-- 悬浮窗 -->
			<view class="dialog" v-if="dialogShow">
			  <view v-if="dialogTitle=='新手帮助'">
			    <help :dialogTitle="dialogTitle" @onCloseClick="onCloseClick" />
			  </view>
			  <view v-if="dialogTitle=='商城'">
			    <store @select="select" @type="gettype" :storeList="storeList" :dialogTitle="dialogTitle" @onCloseClick="onCloseClick" />
			  </view>
			  <view v-if="dialogTitle=='背包'" class="">
			    <backpack @backselect="backselect" @tabselect="tabselect" :packList="packList" :dialogTitle="dialogTitle" @onCloseClick="onCloseClick" />
			  </view>
			  <view v-if="dialogTitle=='探险记录'">
			    <records :listdata="listdata" :dialogTitle="dialogTitle" @onCloseClick="onCloseClick" />
			  </view>
			  <view v-if="dialogTitle=='每日任务'">
			    <fodder @shouqu="shouqu" :dialogTitle="dialogTitle" @onCloseClick="onCloseClick" />
			  </view>
			</view>
			<!-- <view style="pos"></view> -->
<!-- 			<view class="dialog" v-if="dialogShow">
				<image mode="widthFix" class="closeIcon" @click="dialogShow = false" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/2/closeIcon.png">
				<view class="title">{{dialogTitle}}</view>
				<view v-if="dialogTitle=='帮助'">
					<view class="itemList" :style="index!=helpData.length-1?'border-bottom:1rpx solid #ccc':''"
						v-for="(item,index) in helpData" :key="index">
						{{item.des}}
						<text class="rightIcon">></text>
					</view>
				</view>
				<view v-if="dialogTitle=='商城'">
					<view class="tabChange">
						<text @click="changeFood('food')" class="foodTab"
							:class="tabActive=='food'?'tabActive':''">食物</text>|<text @click="changeFood('tool')"
							class="toolTab" :class="tabActive=='tool'?'tabActive':''">道具</text>
					</view>
					<view class="bagBox">
						<view v-for="(item,index) in shopData" :key="index">
							<image mode="widthFix" :src="item.image" />
							<view class="useGoodsBtn" @click="buyGoogs(item)">￥{{item.price}} | 购</view>
						</view>
					</view>
				</view>
				<view v-if="dialogTitle=='背包'" class="bagBox">
					<view v-for="(item,index) in bagData" :key="index">
						<image mode="widthFix" :src="item.image" />
						<view class="useGoodsBtn" @click="bagItemClick(item)">使用</view>
					</view>
				</view>
				<view v-if="dialogTitle=='记录'">
					<view class="tabChange">
						<text @click="changePic('tool')" class="foodTab"
							:class="recordTabActive=='tool'?'tabActive':''">道具</text>|<text @click="changePic('pic')"
							class="toolTab" :class="recordTabActive=='pic'?'tabActive':''">图片</text>
					</view>
					<view class="bagBox">
						<view v-for="(item,index) in shopData" :key="index">
							<image mode="widthFix" :src="item.image" />
						</view>
					</view>
				</view>
				<view v-if="dialogTitle=='领取饲料'">
					<view class="taskBox"
						v-for="(item,index) in foodTask" :key="index">
						<view >
						  {{item.name}}
						  <view class="taskDes">{{item.des}}</view>
						</view>
						<text class="rightBtn" @click="receiveFood">领取</text>
					</view>
				</view>
			</view> -->
			<!-- <view
				@click="all('/pages/liebiao/liebiao')"
				class="flex a-t j=t"
				style="position: fixed; z-index: 1;bottom:130px; right: 0;background: rgba(0,0,0,0.5);color: #fff;border-radius: 8px 0 0 8px;padding: 6px 12px;"
			>
				领取宠物
			</view> -->
				<u-popup v-model="show" mode="center">
					<view class="flex a-t" style="width:300px;max-height: 400px;overflow-y: scroll;padding: 20px;">
						<view @click="adopt(item.id)" v-for="(item,index) in petList" class="" style="box-sizing: border-box;padding: 10px;width: 50%;">
							<image :src="item.image" style="width: 100%;" mode="widthFix"></image>
							<view style="text-align:center;">
								{{item.name}}
							</view>
						</view>
					</view>
				</u-popup>
				<u-popup v-model="show2" mode="center">
					<view class="flex a-t" style="width:300px;max-height: 400px;overflow-y: scroll;padding: 20px;">
						<view @click="adopts(item.id)" v-for="(item,index) in goumailist" class="" style="box-sizing: border-box;padding: 10px;width: 50%;">
							<image :src="item.icon_image" style="width: 100%;" mode="widthFix"></image>
							<view style="text-align:center;">
								{{item.seed_price}}
							</view>
						</view>
					</view>
				</u-popup>
				<u-popup v-model="show3" mode="center">
					<view class="flex a-t" style="width:300px;max-height: 400px;overflow-y: scroll;padding: 20px;">
						<view>帮助中心</view>
					</view>
				</u-popup>
				<u-popup v-model="shows" mode="center">
					<view class="flex a-t" style="width:300px;padding: 20px;">
						<image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/img/treasure.4f475410.png" mode="widthFix" style="width: 100%;"></image>
						<view class="flex a-t"  style="padding: 10px 0;box-sizing: border-box;width: 100%;">
							<view>
								<u-count-down :timestamp="time"></u-count-down>
								后可领取
							</view>
							<view style="margin-left: auto;">
								<u-button size="mini" type="primary" @click="shouqu">收取</u-button>
							</view>
						</view>
						<view class="flex a-t"  style="padding: 10px 0;box-sizing: border-box;width: 100%;">
							<view>
								加速领取
							</view>
							<view style="margin-left: auto;">
								<u-button size="mini" type="primary" @click="jiasu">加速</u-button>
							</view>
						</view>
						<view class="flex a-t"  style="padding: 10px 0;box-sizing: border-box;width: 100%;">
							<view>
								购买套餐
							</view>
							<view style="margin-left: auto;">
								<u-button size="mini" type="primary" @click="goumai">购买</u-button>
							</view>
						</view>
					</view>
				</u-popup>

		</view>
	</view>
	</view>
</template>

<script>
	import help from '../../components/help.vue'
	import records from '../../components/records.vue'
	import fodder from '../../components/fodder.vue'
	import store from '../../components/store.vue'
	import backpack from '../../components/backpack.vue'
	import dayjs from 'dayjs';
	import navbar from '@/components/navbar.vue';
	export default {
		name: "outside",
		components: {
			help,
		records,
		fodder,
		store,
		backpack,
		navbar
		},
		data() {
			return {
				show3:false,
				time:0,
				shows:false,
				show:false,
				show2:false,
				src:'',
				storeList:[],
				goumailist:[],
				packList:[],
				listdata:[],
				dialogShow: false,
				dialogData: {},
				dialogTitle: '',
				tabActive: 'food',
				recordTabActive:'tool',
				top:452,
				left:132,
				width:0,
				height:0,
				// goumailist:[],
				foodTask:[
					{name:'任务1',des:'这是任务1的描述部分'},
					{name:'任务2',des:'这是任务2的描述部分'},
					{name:'任务3',des:'这是任务3的描述部分'},
					{name:'任务4',des:'这是任务4的描述部分'},
				],
				petList:[],
                petInfo: null
			};
		},
		mounted() {
			this.shopData = [...this.foodData]
		},
		onShow() {
			this.getprops()
			this.adopt()
			this.sunflower()
			this.suiji()

		},
		async onLoad() {
			const config = await this.$u.api.wxConfig({ apis: ['chooseWXPay'] });
			this.jWeixin.config({ ...config });
		},
		watch:{
			show(e){
				if(e){
					this.petlist()
				}
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			// 领取道具,领取食物
			select(e){
				this.buy_prop(e[0],e[1].id)
			},
			// 购买食物
			// 购买道具
			async buy_prop(type,id){
				if(type==0){
					let data={
						prop_id:id
					}
					let res = await this.$u.api.buy_prop(data)
					// if(this.ieem.price!=0){
						this.ttpay(res.pay_info)
					// }
				}else{
					let data={
						food_id:id
					}
					let res = await this.$u.api.buy_foods(data)
					uni.showToast({
						title:"购买成功",
						icon:'none'
					})
				}
			},
			ttpay(pay_info){
				// #ifdef H5
				this.jWeixin.chooseWXPay({
					...pay_info,
					timestamp: pay_info.timeStamp,
					success: res => {
						console.info('支付成功。。。');
						console.info(res);
						// 支付成功后的回调函数
						uni.showToast({
							title: '付款成功'
						});
					},
					fail: err => {
						console.info('支付失败。。。');
						console.info(err);
					}
				});
				return;
				// #endif
				// #ifdef MP-TOUTIAO
				const param = {
					provider: 'toutiao',
					orderInfo: pay_info,
					service: 5
				};
				// #endif
				// #ifdef MP-WEIXIN
				const param = pay_info;
				// #endif
				uni.requestPayment({
					...param,
					success: res => {
						if(res.code==0){
							uni.showToast({
								title: '付款成功'
							});
						}
						if(res.code==4){
							uni.showToast({
								title: '用户取消付款',
								icon: 'none'
							});
						}
					},
					fail: e => {
						uni.showToast({
							title: e.errMsg,
							icon: 'none'
						});
						// r(e);
					}
				});
			},
			async goumai(){
				let res = await this.$u.api.seed_meal()
				this.goumailist=res
				this.show2=true
				this.shows=false
			},
			// 购买向日葵套餐
			async adopts(e){
				let data={
					meal_id:e
				}
				let res= await  this.$u.api.buy_seed(data)
				this.ttpay(res.pay_info)
			},
			// 向日葵状态
			async sunflower(){
				let data={
					my_space_id:this.vuex_user_content.id
				}
				let res = await this.$u.api.sunflower(data)
				console.log(res,'vvvvvvv')
				this.time=res.surplus_sec

			},
			async jiasu(){
				let res = await this.$u.api.reduction_time()
				this.sunflower()
				uni.showToast({
					title:'加速成功',
					icon:"none"
				})
			},
			getFood(){
				this.sunflower()
				this.shows=true
			},
			async shouqu(e){
				console.log(e,'eeeeeeeeeee')
				let res = await this.$u.api.seed()
				console.log(res,'gggggg')
				uni.showToast({
					title:'收取成功',
					icon:"none"
				})
				this.sunflower()
			},
			// 我的背包
			async petbag(e){
				let data={
					type:e
				}
				let res= await this.$u.api.petbag(data)
				this.packList=res
			},
			tabselect(e){
				this.petbag(e+1)
			},
			// 背包道具 食物使用
			backselect(e){
				console.log(e,'fffff')
				e.type==2?this.use_prop(e.id):this.feeding(e.id)
				this.dialogShow = false
			},
			//投喂背包食物
			async feeding(id){
				let data={
					bag_id:id
				}
				let res = await this.$u.api.feeding(data)
				console.log(res)
				uni.showToast({
					title:'投喂成功',
					icon:'none'
				})
				this.adopt()
			},

			//使用道具
			async use_prop(id){
				let data={
					bag_id:id
				}
				let res = await this.$u.api.use_prop(data)
				console.log(res)
				uni.showToast({
					title:'道具使用成功',
					icon:'none'
				})
			},
			async petlist(){
				let res= await this.$u.api.petlist()
				this.petList=res
			},
			//查询领取宠物状态，领取宠物
			async adopt(e){
				let data={}
				if(e){
					data.pet_id=e
				}
				let res = await this.$u.api.adopt(data)
				// console.log(dayjs().isBefore(res.satiety_time),'dajs().isBefore(res.satiety_time)dajs().isBefore(res.satiety_time)dajs().isBefore(res.satiety_time)')
				res==null?this.show=true:(
				dayjs().isBefore(res.satiety_time)?this.src=res.pet_image:this.src='',
				this.show=false,
				this.$u.vuex('vuex_dogName',res.pet_name),this.petInfo = res
				)

				// https://yunkeososyunchuc.bc8t.cn/lianaikongjian/gouwoshuoye/3.gif
				console.log(res,'ffffffff')
			},

			//道具切换
			gettype(e){
				console.log(e,'ggggggggg')
				e==0?this.getprops():this.foods()
			},
			//获取食物列表
			async foods(){
				let res= await this.$u.api.foods()
				this.storeList=res
				console.log(res,'ggggggggggggg')
			},

			//获取道具列表
			async getprops(){
				let res= await this.$u.api.props()
				this.storeList=res
				console.log(res,'ggggggggggggg')
			},
			// 随机事件
			suiji(){
				const { windowWidth, windowHeight } = uni.getSystemInfoSync();
				console.log(windowWidth,windowHeight ,1480*(windowHeight/2361))
				this.width=1480*(windowHeight/2361)
				this.height=windowHeight
				// console.log(Math.floor(Math.random()*10))
				// this.top=Math.floor(Math.random()*this.height-120)
				// this.left=Math.floor(Math.random()*this.width-120)
				// setTimeout(()=>{
				// 	this.suiji()
				// },3000)
			},
			// 点击帮助事件
			openHelp() {
				this.dialogShow = true
				this.dialogTitle = '帮助'
			},
			openHelps(){
				uni.navigateTo({
					url:'/pages/bangzhu/bangzhu?type=2'
				})
				// this.show3=true
			},
			// 点击商城事件
			openShop() {
				this.dialogShow = true
				this.dialogTitle = '商城'
				this.shopData = [...this.foodData]
			},
			// 点击背包事件
			openBag() {
				this.dialogShow = true
				this.dialogTitle = '背包'
				this.petbag(1)
			},
			// 点击记录事件
			// 点击记录事件
			openRecord() {
			  this.dialogShow = true
			  this.dialogTitle = '探险记录'
			  this.explore_record()
			  // this.shopData = [...this.recordToolData]

			},
			//探险记录
			async explore_record(){
				let res = await this.$u.api.explore_record()
				// if(res.sceneryImg)
				this.listdata=res
			},
			// 点击投喂图标事件
			feedFood() {
				console.log('点击投喂了')
			},
			// 点击背包中的物资事件
			bagItemClick(item) {
				console.log('点击背包中的物资了')
			},
			// 商城中tab切换为食物的事件
			changeFood(type) {
				this.tabActive = type
				if(type=='food') this.shopData = [...this.foodData]
				else this.shopData = [...this.toolData]
			},
			changePic(type){
				this.recordTabActive = type
				if(type=='tool') this.shopData = [...this.recordToolData]
				else this.shopData = [...this.recordPicData]
			},
			// 点击购买商品事件
			buyGoogs(item){
				console.log('点击购买商品了')
			},
			// 点击领饲料事件
			// getFood(){
			// 	this.dialogShow = true
			// 	this.dialogTitle = '每日任务'
			// },
			receiveFood(){
				console.log('点击领取食物事件')
			},
			// 点击跳转到狗窝内
			intoInside(){
			    return false;
				console.log("跳到狗窝内")
				uni.navigateTo({
					url:'./page2Inside'
				})
			},
			// 关闭弹窗
			onCloseClick() {
				this.dialogShow = false
				this.getprops()
			}
		}
	}
</script>

<style>
	#outside{
		width: 100%;
		/* height: 100vh; */
		/* overflow-y: hidden;
		overflow-x: scroll; */
		overflow-y: hidden;
		overflow-x: scroll;
	}
	.toolIcon{
		width: 83rpx;
		height: 84rpx;
	}
	.bigBox {
		/* width: 100%; */
		height: 100%;
		/* background: url("https://yunkeososyunchuc.bc8t.cn/lianaikongjian/gouwonei/122.png"); */
		/* background-size: cover; */
		/* background-position: 0% top; */
		position: relative;
	}
.topBox{
	/* margin-top: ; */
}
	.topBox image:first-child{
		display: inline-block;
		margin: 80rpx 0 0 30rpx;
		cursor: pointer;
	}
	.topBox image:last-child{
		float: right;
		margin: 80rpx 45rpx 0  0;
	}
.sunIcon{
	position: absolute;
	right:135rpx;
	top:170rpx
}
.sunIcon image{
	width: 200rpx;
	height: 200rpx;
}
	.icon {
		margin: -460rpx 0 0 45rpx;
		position: relative;
	}
.middlePart{
	position: absolute;
	bottom: 200rpx;
	left: 0;
}
	.dog {
		margin: -50rpx 0 0 140rpx;
		position: absolute;
		bottom: 80rpx;
	}

	.dog image:first-child {
		margin-left: 132rpx
	}
	.dog image:last-child {
		cursor: pointer;
	}

	.bottomBtn {
		padding:0 50rpx 0 40rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		width: 100%;
		position: fixed;
		top: 40%;
	}

	.icon image,
	.bottomBtn image {
		cursor: pointer;
	}

	.dialog {
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 1;
		transform: translate(-50%, -50%);
		width: 98%;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 5rpx;
		padding: 20rpx 30rpx;
		font-size: 24rpx;
	}

	.title {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.closeIcon {
		position: absolute;
		right: 15rpx;
		top: 15rpx;
		width: 26rpx;
		cursor: pointer;
		transform: scale(1.5);
	}

	.itemList {
		padding: 8rpx 10rpx;
		color: #666;
		cursor: pointer;
	}

	.rightIcon {
		font-size: 20rpx;
		float: right;
		transform: scaleY(1.6);
	}

	.bagBox {
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		align-items: flex-start;
	}

	.bagBox>view {
		width: 25%;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.bagBox image {
		width: 90rpx;
		height: 90rpx;
		display: inline-block;
		margin-bottom: 8rpx;
	}

	.useGoodsBtn {
		margin: 0 auto;
		width: 90%;
		padding: 6rpx 0;
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 30rpx;
		cursor: pointer;
	}

	.tabChange {
		width: 42%;
		margin: -10rpx 0 20rpx;
		border-radius: 20rpx;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.foodTab {
		display: inline-block;
		box-sizing: border-box;
		width: 48%;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		padding: 6rpx 10rpx 6rpx 0;
		text-align: right;
		cursor: pointer;
	}

	.toolTab {
		display: inline-block;
		box-sizing: border-box;
		width: 49%;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		padding: 6rpx 0 6rpx 10rpx;
		cursor: pointer;
	}
	.tabActive{
		background-color: rgba(11, 137, 255, 0.6);
		color: #fff;
	}
	.taskBox{
		border-radius: 12rpx;
		padding: 8rpx 12rpx;
		border: 1rpx solid rgba(0,0,0,0.1);
		position: relative;
		margin-bottom: 15rpx;
	}
	.taskDes{
		font-size: 20rpx;
		color: #888;
	}
	.rightBtn{
		display: inline-block;
		width: 15%;
		position: absolute;
		right:25rpx;
		top:50%;
		transform: translate(0,-50%);
		padding: 3rpx;
		border-radius: 30rpx;
		border: 1rpx solid rgba(0,0,0,0.2);
		background-color: rgba(255,255,255,0.1);
		font-size: 20rpx;
		letter-spacing: 2rpx;
		text-align: center;
	}
</style>
